<template>
  <div class="all_article_con">
    <div class="top_input_con">
      <el-input placeholder="请输入标题" size="small" prefix-icon="el-icon-search" v-model="titleStr"></el-input>
      <el-select v-model="select_type" size="small" placeholder="选择类别">
        <el-option v-for="item in types" :key="item.id" :label="item.type_name" :value="item.type_name"></el-option>
      </el-select>
      <el-select v-model="select_label" size="small" placeholder="选择标签">
        <el-option v-for="item in labels" :key="item.id" :label="item.label_name" :value="item.label_name"></el-option>
      </el-select>
      <el-select v-model="is_draft" size="small" placeholder="文章模式">
        <el-option label="草稿" value="1"></el-option>
        <el-option label="正式" value="0"></el-option>
      </el-select>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
      <el-button type="primary" plain size="small" @click="clear">清空</el-button>
    </div>
    <div class="list_con">
      <el-table :data="data.data" size="small" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180">
          <template slot-scope="scope">
            <span :title="scope.row.id">{{ scope.row.id | textOverflow }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="article_title" label="标题" width="100"></el-table-column>
        <el-table-column prop="type" label="类别"></el-table-column>
        <el-table-column prop="label" label="标签">
          <template slot-scope="scope">
            <template v-if="scope.row.label">
              <el-tag v-for="(item,index) in scope.row.label.split('、')" type="primary" :key="index">{{item}}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="is_draft" label="模式">
          <template slot-scope="scope">
            <span style="color:skyblue" v-if="scope.row.is_draft == 1">草稿</span>
            <span v-else>正式</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="150">
          <template slot-scope="scope">{{ scope.row.create_time | time }}</template>
        </el-table-column>
        <el-table-column prop="modify_time" label="修改时间" width="150">
          <template slot-scope="scope">{{ scope.row.modify_time | time }}</template>
        </el-table-column>
        <el-table-column prop="edit" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="editArticle(scope.row.id)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="delArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot_con">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { formatTime } from "../../../utils/tools"
import { $articleList, $delArticle } from "../../../api/admin"
import { Message } from "element-ui"

export default {
  name: "AllArticle",
  data() {
    return {
      titleStr: "", // 输入的标题
      select_type: "", // 要查询的类别
      select_label: "", // 要查询的标签
      types: this.$store.state.article.types, // 类别
      labels: this.$store.state.article.labels, // 标签
      data: {}, // 文章数据列表
      pageSize: 10, // 每页显示的条数
      pageNum: 1, // 当前页码
      is_draft: "", // 文章模式
    }
  },
  filters: {
    time(val) {
      return formatTime(val)
    },
    textOverflow(val) {
      return val && val.length > 15 ? val.substr(0, 15) + "..." : val
    }
  },
  created() {
    this.getArticleList()
    console.log(this.$store.state.article.types);
    console.log(this.$store.state.article.labels);
  },
  mounted() {
    this.$store.dispatch('setNowPath', this.$route)
  },
  methods: {
    // 编辑文章
    editArticle(id) {
      console.log("编辑文章", id)
      this.$router.push("edit_article/" + id)
    },

    // 删除文章
    delArticle(id) {
      console.log("删除文章：", id);
      this.$confirm("确定删除该文章吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        $delArticle({
          id
        }).then(() => {
          Message.success("删除成功")
          this.getArticleList()
        })
      }).catch(() => {
        Message.info("已取消删除");
      });
    },

    // 清空搜索条件
    clear() {
      this.titleStr = ""
      this.select_type = ""
      this.select_label = ""
      this.is_draft = ""
      this.getArticleList()
    },

    // 单页显示数量发生改变
    handleSizeChange(e) {
      console.log("page size change:", e);
      this.pageSize = e;
      this.getArticleList();
    },

    // 页面切换事件
    handleCurrentChange(e) {
      console.log("page change to :", e);
      this.pageNum = e;
      this.getArticleList();
    },

    // 获取文章列表
    getArticleList() {
      let params = {
        type: this.select_type,
        label: this.select_label,
        articleTitle: this.titleStr,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.is_draft && (params["isDraft"] = this.is_draft)

      $articleList(params).then(result => {
        console.log("文章:", result);
        this.data = result.data
        this.$forceUpdate()
      })
    },

    // 搜索
    search() {
      console.log("search")
      this.getArticleList()
    }
  },

}

</script>
<style lang="scss" scoped>
.all_article_con {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .el-table {
    border-radius: 10px;
  }

  .top_input_con {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    .el-input {
      margin-right: 10px;
      width: 300px;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .list_con {
    flex: 1 auto;
    overflow-y: scroll;
  }

  .foot_con {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    width: 100%;
    text-align: center;
  }

}
</style>